React 组件主要有两种定义方式，分别是： 一、函数定义方式

函数声明：使用传统的函数声明语法定义组件。例如：

javascript复制代码function HelloComponent(props) { return

;} 这种方式创建的组件被称为函数组件（Function Component）。函数组件通常用于展示静态内容或只接受传入的 props 并根据 props 渲染 UI。它们不存储状态，不依赖生命周期方法，且是纯函数，即给定相同的输入时始终产生相同的输出。

箭头函数：使用 ES6 引入的箭头函数语法定义组件。例如：

javascript复制代码const LoginComponent = () => { // 组件逻辑 return

;}; 箭头函数组件也是函数组件的一种，具有与函数声明方式相同的特性和用法。箭头函数的语法更为简洁，尤其适用于只有一个表达式的简单组件。由于箭头函数隐式地将 this 绑定到所在的上下文，因此可以更容易地访问父组件传递的 props。 二、类定义方式 使用类（class）定义组件时，需要先从 React 中解构出 React.Component 并继承它。例如： javascript复制代码import React, { Component } from 'react'; class HelloComponent extends Component { render() { return ; }} 这种方式创建的组件被称为类组件（Class Component）。类组件提供了更多的功能和生命周期方法，可以被实例化，并且可以访问组件的生命周期方法。然而，随着 React Hooks 的引入，函数组件和箭头函数组件的使用越来越普遍，因为它们更简洁、易于理解和测试。 总结 React 组件的两种主要定义方式是函数定义方式和类定义方式。函数定义方式包括传统的函数声明和箭头函数两种语法形式，适用于创建无状态的纯展示组件。类定义方式则提供了更多的功能和生命周期方法，适用于需要管理状态和生命周期的复杂组件。然而，在现代 React 开发中，函数组件和箭头函数组件由于简洁性和易用性而越来越受欢迎。